<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部部分 -->
            <el-header>
                <el-row justify="space-between" align="middle">
                    <el-col :span="6">
                        <div class="breadcrumb">
                            <el-icon>
                                <Fold />
                            </el-icon>
                            <span>财务</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="user-info">
                            <el-avatar :size="30" src="" />
                            <span class="username">admin</span>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-header class="white"></el-header>
            <!--内容部分-->
            <el-main>
                <!--搜索部分-->
                <el-header class="search">
                    <el-input v-model="search" style="width: 240px" placeholder="请输入持有人姓名或手机号" />
                    <el-button type="primary">搜索</el-button>
                </el-header>
                <!--刷新部分-->
                <el-header class="refresh">
                    <el-button type="info" @click="handleRefresh">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                        刷新
                    </el-button>
                </el-header>
                <!--表格部分-->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="holder" label="持有人姓名" width="8%"></el-table-column>
                    <el-table-column prop="company" label="持有人手机号" width="8%"></el-table-column>
                    <el-table-column prop="inviter" label="设备数量/台" width="8%"></el-table-column>
                    <el-table-column prop="revenue" label="本月投递收益/元" width="8%"></el-table-column>
                    <el-table-column prop="MonthlyRent" label="租金/台/月" width="8%"></el-table-column>
                    <el-table-column prop="equipmentPrice" label="设备单价/元" width="8%"></el-table-column>
                    <el-table-column prop="payeeName" label="收款人姓名" width="8%"></el-table-column>
                    <el-table-column prop="cardNumber" label="邀请人姓名" width="8%"></el-table-column>
                    <el-table-column prop="depositBank" label="设备编号" width="8%"></el-table-column>
                    <el-table-column prop="subBranch" label="签订日期" width="13%"></el-table-column>
                    <el-table-column prop="remarks" label="备注" width="5%"></el-table-column>
                    <el-table-column prop="option" label="操作" width="10%">
                        <template #default="scope">
                            <el-button class="edit" size="small" type="primary" @click="handleEdit(scope.row)">
                                编辑
                            </el-button>
                            <el-button class="transfer" size="small" type="primary" @click="handleTransfer(scope.row)">
                                设备转让
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页器-->
                <div class="demo-pagination-block">
                    <el-pagination v-model:curMonthlyRent-page="curMonthlyRentPage" v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @size-change="handleSizeChange" @curMonthlyRent-change="handleCurMonthlyRentChange" />
                </div>
            </el-main>

        </el-container>
    </div>

    <!-- 编辑模态框 -->
    <el-dialog v-model="editDialogVisible" title="编辑设备信息" width="600px">
        <el-form ref="editFormRef" :model="editForm" :rules="rules" label-width="120px">
            <el-row :gutter="20">
                <el-col :span="14">
                    <el-form-item label="持有人" prop="holder">
                        <el-input v-model="editForm.holder" placeholder="请输入持有人姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="14">
                    <el-form-item label="公司" prop="company">
                        <el-input v-model="editForm.company" placeholder="请输入持有人手机号" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="14">
                    <el-form-item label="邀请人" prop="inviter">
                        <el-input v-model="editForm.inviter" placeholder="请输入邀请人" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="单台月租金/元/台" prop="MonthlyRent">
                        <el-input v-model="editForm.MonthlyRent" placeholder="请输入租金" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备单价/元" prop="equipmentPrice">
                        <el-input v-model="editForm.equipmentPrice" placeholder="请输入设备单价" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="收款人姓名" prop="payeeName">
                        <el-input v-model="editForm.payeeName" placeholder="请输入收款人姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="收款人银行卡号" prop="cardNumber">
                        <el-input v-model="editForm.cardNumber" placeholder="请输入邀请人姓名" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="开户银行" prop="depositBank">
                        <el-input v-model="editForm.depositBank" placeholder="请输入设备编号" readonly />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支行" prop="subBranch">
                        <el-date-picker v-model="editForm.subBranch" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-form-item label="合同起止日期" prop="sEData">
                        <el-date-picker v-model="editForm.sEData" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="是否启用" prop="enable">
                <el-radio-group v-model="editForm.enable">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
                <el-input v-model="editForm.remarks" placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleEditSubmit">确定</el-button>
        </template>
    </el-dialog>

    <!-- 设备转让模态框 -->
    <el-dialog v-model="transferDialogVisible" title="设备转让" width="500px">
        <el-form ref="transferFormRef" :model="transferForm" :rules="transferRules" label-width="120px">
            <el-form-item label="原持有人" prop="originalHolder">
                <el-input v-model="transferForm.originalHolder" placeholder="原持有人" readonly />
            </el-form-item>
            <el-form-item label="设备编号" prop="depositBank">
                <el-input v-model="transferForm.depositBank" placeholder="设备编号" readonly />
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="新持有人姓名" prop="newholder">
                        <el-input v-model="transferForm.newholder" placeholder="请输入新持有人姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="新持有人手机号" prop="newHolderMobile">
                        <el-input v-model="transferForm.newHolderMobile" placeholder="请输入新持有人手机号" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="转让日期" prop="transferDate">
                <el-date-picker v-model="transferForm.transferDate" type="date" placeholder="请选择转让日期"
                    value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="转让原因" prop="transferReason">
                <el-input v-model="transferForm.transferReason" placeholder="请输入转让原因" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="transferDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleTransferSubmit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Refresh, Fold } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getlist } from '@/components/Finance/DeviceStatisics'
import axios from 'axios'
//搜索栏
const search = ref('')

// 刷新页面函数
const handleRefresh = () => {
    window.location.reload()
}

//分页器
const curMonthlyRentPage = ref(1)
const pageSize = ref(10)
const total = ref(30) // 模拟总数据量

// 分页器事件
const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`)
    pageSize.value = val
    // 实际项目中这里应该调用接口重新获取数据
}

const handleCurMonthlyRentChange = (val) => {
    console.log(`当前页: ${val}`)
    curMonthlyRentPage.value = val
    // 实际项目中这里应该调用接口重新获取数据
}
//渲染列表
let list= async()=>{
    let data={
        pageIndex:1,
        pageSize:20
    }
    axios.post("http://106.13.143.56:8080/equipment_holder/deviceList",data).then((res)=>{
        console.log(res);
        
    })
    // await getlist(data).then((res)=>{
    //     console.log(res);
        
    // }).catch((err)=>{
    //     console.log(err);
        
    // })
 
    
}
onMounted(()=>{
    list()
})
//表格数据
const tableData = [
    {
        holder: '张三',
        company: '1555555555',
        inviter: '2',
        revenue: '280.00',
        MonthlyRent: '180.00',
        equipmentPrice: '18900.00',
        payeeName: '张三',
        cardNumber: '李四',
        depositBank: 'XQ31104152',
        subBranch: '2025-10-01.2025-10-02',
        remarks: '',
    },
    {
        holder: '张三',
        company: '1555555555',
        inviter: '2',
        revenue: '280.00',
        MonthlyRent: '180.00',
        equipmentPrice: '18900.00',
        payeeName: '张三',
        cardNumber: '李四',
        depositBank: 'XQ31104152',
        subBranch: '2025-10-01.2025-10-02',
        remarks: '',
    },
    {
        holder: '张三',
        company: '1555555555',
        inviter: '2',
        revenue: '280.00',
        MonthlyRent: '180.00',
        equipmentPrice: '18900.00',
        payeeName: '张三',
        cardNumber: '李四',
        depositBank: 'XQ31104152',
        subBranch: '2025-10-01.2025-10-02',
        remarks: '',
    },
]

// 编辑模态框
const editDialogVisible = ref(false)
const editFormRef = ref(null)
const editForm = reactive({
    holder: '',
    company: '',
    inviter: '',
    revenue: '',
    MonthlyRent: '',
    equipmentPrice: '',
    payeeName: '',
    cardNumber: '',
    depositBank: '',
    subBranch: [],
    remarks: ''
})

// 编辑表单验证规则
const rules = {
    holder: [
        { required: true, message: '请输入持有人姓名', trigger: 'blur' }
    ],
    company: [
        { required: true, message: '请输入持有人手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    inviter: [
        { required: true, message: '请输入设备数量', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
    ],
    revenue: [
        { required: true, message: '请输入本月投递收益', trigger: 'blur' },
        { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
    ],
    MonthlyRent: [
        { required: true, message: '请输入租金', trigger: 'blur' },
        { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
    ],
    equipmentPrice: [
        { required: true, message: '请输入设备单价', trigger: 'blur' },
        { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
    ],
    payeeName: [
        { required: true, message: '请输入收款人姓名', trigger: 'blur' }
    ],
    cardNumber: [
        { required: true, message: '请输入邀请人姓名', trigger: 'blur' }
    ],
    depositBank: [
        { required: true, message: '请输入设备编号', trigger: 'blur' }
    ],
    subBranch: [
        { required: true, message: '请选择签订日期', trigger: 'change' }
    ],
    remarks: [
        { required: false, message: '请输入备注', trigger: 'blur' }
    ]
}

// 编辑按钮点击事件
const handleEdit = (row) => {
    // 填充表单数据
    editForm.holder = row.holder
    editForm.company = row.company
    editForm.inviter = row.inviter
    editForm.revenue = row.revenue
    editForm.MonthlyRent = row.MonthlyRent
    editForm.equipmentPrice = row.equipmentPrice
    editForm.payeeName = row.payeeName
    editForm.cardNumber = row.cardNumber
    editForm.depositBank = row.depositBank

    // 处理日期范围
    if (row.subBranch) {
        const dates = row.subBranch.split('.')
        editForm.subBranch = dates.length === 2 ? [dates[0], dates[1]] : []
    } else {
        editForm.subBranch = []
    }

    editForm.remarks = row.remarks
    editDialogVisible.value = true
}

// 编辑表单提交
const handleEditSubmit = () => {
    editFormRef.value.validate((valid) => {
        if (valid) {
            // 模拟更新数据,,调编辑接口
            const index = tableData.findIndex(item => item.depositBank === editForm.depositBank)
            if (index !== -1) {
                // 更新表格数据,调列表重新渲染
                list()
                // tableData[index].holder = editForm.holder
                // tableData[index].company = editForm.company
                // tableData[index].inviter = editForm.inviter
                // tableData[index].revenue = editForm.revenue
                // tableData[index].MonthlyRent = editForm.MonthlyRent
                // tableData[index].equipmentPrice = editForm.equipmentPrice
                // tableData[index].payeeName = editForm.payeeName
                // tableData[index].cardNumber = editForm.cardNumber
                // tableData[index].subBranch = editForm.subBranch.join('.')
                // tableData[index].remarks = editForm.remarks

                // 关闭模态框
                editDialogVisible.value = false
                ElMessage.success('编辑成功')
            }
        } else {
            console.log('表单验证失败')
            return false
        }
    })
}

// 设备转让模态框
const transferDialogVisible = ref(false)
const transferFormRef = ref(null)
const transferForm = reactive({
    originalHolder: '',
    depositBank: '',
    newholder: '',
    newHolderMobile: '',
    transferDate: '',
    transferReason: ''
})

// 设备转让表单验证规则
const transferRules = {
    newholder: [
        { required: true, message: '请输入新持有人姓名', trigger: 'blur' }
    ],
    newHolderMobile: [
        { required: true, message: '请输入新持有人手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    transferDate: [
        { required: true, message: '请选择转让日期', trigger: 'change' }
    ],
    transferReason: [
        { required: true, message: '请输入转让原因', trigger: 'blur' }
    ]
}

// 设备转让按钮点击事件
const handleTransfer = (row) => {
    // 填充表单数据
    transferForm.originalHolder = row.holder
    transferForm.depositBank = row.depositBank
    transferForm.newholder = ''
    transferForm.newHolderMobile = ''
    transferForm.transferDate = ''
    transferForm.transferReason = ''
    transferDialogVisible.value = true
}

// 设备转让表单提交
const handleTransferSubmit = () => {
    transferFormRef.value.validate((valid) => {
        if (valid) {
            // 模拟设备转让操作，，调接口设备转让
            console.log('设备转让信息:', transferForm)

            // 关闭模态框
            transferDialogVisible.value = false
            ElMessage.success('设备转让申请已提交')
        } else {
            console.log('表单验证失败')
            return false
        }
    })
}
</script>

<style lang="less" scoped>
/* 头部部分 */
.el-header {
    height: 40px;
    border-bottom: 1px solid rgb(187, 186, 186);
}

.breadcrumb {
    display: flex;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 新增：用户名与头像间距 */
}

.white {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/*设备转让*/
.transfer {
    background-color: rgb(223, 120, 37);
    border-color: rgb(223, 120, 37);
    margin-left: 10px;
}

/*内容部分*/
.el-main {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*搜索部分*/
.search {
    width: 100%;
    border: none;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/*添加/刷新部分*/
.refresh {
    width: 100%;
    border: none;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: right;
}

/*表格部分*/
/*数据表格部分*/
:deep(.el-table) {
    width: 100% !important;

    .el-table__header-wrapper,
    .el-table__body-wrapper {
        width: 100% !important;
    }

    .el-table__header {
        width: 100% !important;
    }

    .el-table__body {
        width: 100% !important;
    }

    .el-table__row {
        height: 80px !important;
    }

    /* 确保表格列宽度生效 */
    .el-table__header th,
    .el-table__body td {
        text-align: center;
    }
}

/*分页器*/
.demo-pagination-block {
    width: 98%;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 20px;
}
</style>
